<template>
  <view>
    <!-- 顶部搜索框开始 -->
    <YgSerch></YgSerch>
    <!-- 顶部搜索框结束 -->

    <!-- tabs标签开始 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#eb4450"
    ></u-tabs>
    <!-- tabs标签结束 -->

    <!-- tabs下的内容开始 -->
    <view class="goods-content" v-if="current == 0">
      <navigator
        v-for="item in goods"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?id=' + item.goods_id"
      >
        <view class="goodsItem u-flex u-margin-bottom-10">
          <view class="goods-left u-flex-1">
            <u-image
              :src="
                item.goods_small_logo == ''
                  ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017bcb58b4db5fa801219c7719b5ff.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632723746&t=6badac5d63b821e2cbb20c356bae3ce9'
                  : item.goods_small_logo
              "
              mode="widthFix"
              width="80%"
            ></u-image>
          </view>
          <view class="goods-right u-flex-2">
            <!-- u-line-2 文字省略 -->
            <view class="goods_name u-line-2">{{ item.goods_name }}</view>
            <view class="goods_price">￥{{ item.goods_price }}</view>
          </view>
        </view>
      </navigator>
    </view>
    <view class="goods-content" v-else-if="current == 1"> </view>
    <view class="goods-content" v-else-if="current == 2">价格内容</view>
    <!-- tabs下的内容结束 -->
  </view>
</template>

<script>
let params = {
  query: "",
  cid: "",
  //当前页码
  pagenum: 1,
  //页码容量
  pagesize: 10,
};
// 总页数
let totalPage = 0;
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      //商品详情数据
      goods: [],
    };
  },
  //页面初始化请求数据
  async onLoad(option) {
    // 初始化页面的页码
    params.pagenum = 1;
    //获取上个页面传过来的id
    const { id } = option;
    console.log(id);
    //向服务器请求数据
    // 判断有无传过来的id
    params.cid = id;
    this.getGoods();
  },

  //滚动条触底时，触发
  onReachBottom() {
    console.log(totalPage);
    // 判断还有没有下一页数据
    if (params.pagenum >= totalPage) {
      uni.showToast({
        title: "没有更多数据了",
        icon: "none", // 不写none 默认值 success 打钩
      });
    } else {
      //当前页码自增
      params.pagenum++;
      this.getGoods();
    }
  },

  //下拉刷新事件
  //重置请求参数 ，发送请求
  onPullDownRefresh() {
    //清空数组
    this.goods = [];
    params.pagenum = 1;
    this.getGoods(function () {
      // 关闭下拉刷新窗口
      uni.stopPullDownRefresh();
    });
  },

  methods: {
    //封装获取商品数据函数
    async getGoods(callback) {
      const res = await this.$u.get("/goods/search", params);
      console.log("商品详情数据", res);
      //将数据赋值给goods变量   (新旧数据叠加)
      this.goods = [...this.goods, ...res.message.goods];
      //this.goods = this.goods.concat(res.message.goods);
      //  总页数 = 总条数 / 页码容量
      totalPage = Math.ceil(res.message.total / params.pagesize);
      //判断是否有函数传进来
      callback && callback();
    },

    //点击谁把样式添加谁
    change(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss">
.goodsItem {
  align-items: stretch;
  border-bottom: 1px solid #eee;
}
.goods-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .goods_price {
    color: $themeColor;
  }
}
</style>